<template>
  <div class="myOrder">
    <div class="tltle">
      我的订单
    </div>

    <div class="content">
      <div class="head">
        <ul class="nav">
          <li :class="activeCss[0]" @click="orderTypeBtn(0)">全部订单</li>
          <li :class="activeCss[1]" @click="orderTypeBtn(1)">待付款</li>
          <li :class="activeCss[2]" @click="orderTypeBtn(2)">待收货</li>
          <li :class="activeCss[3]" @click="orderTypeBtn(3)">待评价</li>
        </ul>
        <ul class="orderHead">
          <li class="detail">订单详情</li>
          <li>收货人</li>
          <li>金额</li>
          <li>状态</li>
          <li>操作</li>
        </ul>
      </div>
      <div class="list">

        <OrderItem v-for="(item, index) in filterOrders"
                   :key="index"
                   :order="item"
                   v-on:newOrder="newOrder"
                    />

        <Nothing v-if="filterOrders.length == 0" />

      </div>

      <div v-if="filterOrders.length>0">
        <Page :current="nowPage"
              :total="allCount"
              simple
              @on-change="changePage" />
      </div>
    </div>
  </div>
</template>

<script>
import OrderItem from './comps/OrderItem'
import { getOrders } from 'server/front_k.js'

export default {
  data() {
    return {
      orders: [],//显示的数据
      allOrder:[],//所有的数据
      nowPage: 1,
      allCount: 0,
      activeCss:[
        'active',
        '1',
        "1",
        '1'
      ],
      all:0,
    }
  },
  components: {
    OrderItem
  },
  created() {

    this._getOrders()
  },
  methods: {
    _getOrders() {
      getOrders().then(res => {
        if (res.err_code == 1000) {
          this.orders = res.data;
          //将返回的数据赋予给allorder
          this.allOrder=res.data;
          //数量
          this.allCount = Math.ceil(res.data.length / 3) * 10
        }
      })
    },
    changePage(i) {
      this.nowPage = i
 
    },
    orderTypeBtn(x){
      this.all=x;
      //修改样式
      var newActive = [];
      for(var i=0;i<this.activeCss.length;i++){
        if(i==x){
          var newCss = 'active';
          newActive.push(newCss);
        }else{
          var newCss = "1";
          newActive.push(newCss);
        }
      }
      this.activeCss=newActive;
      //切换订单
      var newOrder = [];
      for(var j =0;j<this.allOrder.length;j++){
        if(this.allOrder[j].state==x){
          newOrder.push(this.allOrder[j]);
        }
      }
      if(x==1 || x==2 || x==3){
        this.orders=newOrder;
      }else{
        this.orders=this.allOrder;
      }
      this.allCount = Math.ceil(this.orders.length / 3) * 10
    },
    newOrder(){
       getOrders().then(res => {
        if (res.err_code == 1000) {
          //将返回的数据赋予给allorder
          this.allOrder=res.data;
          //数量
          var newOrder = [];
          for(var j =0;j<this.allOrder.length;j++){
            if(this.allOrder[j].state==this.all){
              newOrder.push(this.allOrder[j]);
            }
          }
          if(this.all==1 || this.all==2 || this.all==3){
            this.orders=newOrder;
          }else{
            this.orders=this.allOrder;
          }
          this.allCount = Math.ceil(this.orders.length / 3) * 10
        }
      })
    },
  },
  computed: {
    filterOrders() {
      let arr = this.orders.filter((v, i) => {
        if (i >= (this.nowPage - 1) * 3 && i <= this.nowPage * 3 - 1) {
          return v
        }
      })

      return arr
    }
  }
}
</script>

<style scoped>
.myOrder {
  font-size: 12px;
}
.tltle {
  /* padding: 20px; */
  color: #000;
  font-weight: 600;
  font-size: 12px;
  padding: 20px;
  border-bottom: 20px #f0f3ef solid;
}
.content {
  padding: 20px;
}
.nav {
  display: flex;
}
.nav > li {
  margin-right: 20px;
  cursor: pointer;
  padding: 5px 0;
}
.nav > li:hover {
  border-bottom: 2px solid var(--color-main);
  color: var(--color-main);
  /* font-size: 30px; */
}
.active {
  border-bottom: 2px solid var(--color-main);
  color: var(--color-main);
}
.orderHead {
  display: flex;
  background-color: #f5f5f5;
  padding: 10px;
  margin-top: 20px;
}
.orderHead > li {
  flex: 1;
  text-align: center;
}
.orderHead .detail {
  flex: 3;
}
</style>